<!-- /components/InfoItem/InfoItem.vue -->
<template>
  <view class="info-item">
    <text class="label">{{ label }}</text>
    <text :class="['value', valueClass]">{{ value }}</text>
  </view>
</template>

<script setup>
defineProps({
  label: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number],
    required: true
  },
  valueClass: {
    type: String,
    default: ''
  }
});
</script>

<style lang="scss">
.info-item {
  display: flex;
  margin-bottom: 25rpx;
  font-size: 28rpx;

  .label {
    color: #666;
    min-width: 150rpx;
  }

  .value {
    color: #333;
    flex: 1;

    &.highlight {
      color: #09BE4F;
      font-weight: bold;
    }

    &.discount {
      color: #FF4444;
    }
  }
}
</style>